<template>
	<!--未中奖组件-->
	<div class="box">
		<div class="wrap-box">
		<div class="connect-box">
			<header>
				<div class="left-box">
					未中奖
				</div>
			</header>
			<img src="../../assets/images/choujiang/losing.png" />
			<p class="losing-tip">您与奖品擦肩而过~</p>
			<div class="btn" @click="closeLosingCom">
				我知道了
			</div>
		</div>
		<div class="close" @click="closeLosingCom"></div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			closeLosingCom() { //关闭未中奖
				this.$emit('formChildMsg', {
					type: 'closeLosingCom',
					data: 'ruan'
				})
			},
		}
	}
</script>

<style scoped="scoped">
	.wrap-box{
		width:100vw;
		height: 900px;
		/*background: salmon;*/
		position: relative;
	}
    .close {
		width: 63px;
		height: 63px;
		background: url(../../assets/images/choujiang/cj-close.png) no-repeat;
		background-size: 63px 63px;
		/*margin: 100px auto 0;*/
		position: absolute;
		bottom: 10px;
		left: 346px;
	}
	.losing-tip {
		font-size: 36px;
		text-align: center;
		color: #FFFFFF;
	}
	
	.connect-box img {
		width: 440px;
		height: 280px;
		margin: 40px auto 8px;
	}
	
	.btn {
		width: 343px;
		height: 96px;
		background: linear-gradient(-180deg, #FEE3D2 0%, #FFCCAC 100%);
		border-radius: 48px;
		line-height: 96px;
		text-align: center;
		color: #965636;
		font-size: 38px;
		margin: 70px auto 0;
		font-weight: 600;
	}
	
	.left-box {
		width: 171px;
		height: 57px;
		background: url(../../assets/images/choujiang/lefttab.png) no-repeat;
		background-size: 171px 57px;
		text-align: center;
		line-height: 57px;
		font-size: 26px;
		color: #815048;
	}
	
	header {
		width: 100%;
		height: 56px;
		/*background: seagreen;*/
		line-height: 56px;
	}
	
	header .left-box {
		float: left;
		color: #815048;
		font-size: 26px;
	}
	
	.box {
		width: 100vw;
		height: 100vh;
		/*background: pink;*/
		margin: 0 auto;
		position: absolute;
		z-index: 1010;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.connect-box {
		width: 487px;
		height: 680px;
		background: linear-gradient(-45deg, #F84848 0%, #FF7878 100%);
		border: 2px solid #FED8C0;
		border-radius: 15px;
		margin: 0 auto;
	}
</style>